<template>
  <div id="app">
    <!--使用router-link配置路由如口-->
    <ul class="layui-nav layui-bg-cyan">
      <!--当点击router-link的时候自动加的两个类名：router-link-exact-active(精准匹配) router-link-active(模糊匹配)-->
      <li class="layui-nav-item">
        <router-link to="/discoverMusic">发现音乐</router-link>
      </li>
      <li class="layui-nav-item">
        <router-link to="myMusic">我的音乐</router-link>
      </li>
      <li class="layui-nav-item">
        <router-link to="follow">关注</router-link>
      </li>
    </ul>
    <!--使用router-view配置路由出口-->
    <router-view></router-view>
  </div>
</template>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
}

/*
精准添加类名
.router-link-active{
  color: #00f7de !important;
}
*/
/*模糊添加类名
.router-link-exact-active {
  color: #00f7de !important;
}
*/

//以下两个是自定义精准匹配和模糊匹配的类名
.active {
  color: #00f7de !important;
}

/*
.exact-active{
  color: #00f7de !important;
}
*/
</style>
<script setup>
</script>